import React from 'react';
import {connect} from 'dva/index';
import {Tag, Button, Col, DatePicker, Form, Input, Popconfirm, Radio, Row, Table} from 'antd';
import Constants from '../../utils/Constants';
import RightConstants from '../../utils/RightConstants';
import BizParams from '../../components/common/BizParams';
import RoleSelect from '../../components/common/roleSelect';
import RightBox from '../../components/common/rightBox';
import TrailerDetail from '../../components/logisticsOrder/trailer'

const {RangePicker} = DatePicker;
const RadioGroup = Radio.Group;
const R = require('ramda');
const FormItem = Form.Item;
const onlineBooking = Form.create()(class QuickBooking extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            bookingId: undefined,        //当前订舱ID
        }
    }


    componentDidMount() {
        this.getOderList()
    }


    getOderList = () => {
        this.props.dispatch({
            type: 'trailer/getOrderList',
            payload: {...R.pick(['page', 'size'], Constants.DEFAULT_PAGE)}  //相当于  payload: {page:1,size:10}
        });//查询订单列表
    }


    handleSearch = (flag) => {
        let values = this.props.form.getFieldsValue();
        let newPage = R.pick(['page', 'size'], this.props.trailer.page);
        if (flag) newPage.page = 1;
        console.log(values)
        this.props.dispatch({
            type: 'trailer/getOrderList',
            payload: {
                ...values,
                ...newPage
            }
        });
    };



    handleOpen = (id, disabled) => {
        // this.props.dispatch({ type: 'supplier/getSupplierList', payload: { supplierType: Constants.SUPPLIER_TYPE.FRAE } });  //查询海运供应商
        // this.props.dispatch({ type: 'supplier/getAirSupplierList' });  //查询空运供应商List
        // this.props.dispatch({ type: 'berthingCompany/getAllBerthingCompanys' }); //查询船公司
        this.props.dispatch({type: 'trailer/getById', payload: {id}});
        this.onlineBookingDetail.handleOpen(disabled);
    }

    handleDelete = (id) => {
        this.props.dispatch({
            type: 'trailer/deleteById',
            payload: {
                id,
            },
            callback: () => {
                this.getOderList()
            },
        })

    }

    columns = [
        {title: '订单编号', dataIndex: 'orderno', key: 'orderno'},
        {title: '城市', dataIndex: 'city', key: 'city'},
        {title: '区域', dataIndex: 'county', key: 'county'},
        {title: '装货地址', dataIndex: 'adderss', key: 'adderss'},
        {title: '装货码头', dataIndex: 'port', key: 'port'},
        {title: '联系人', dataIndex: 'contact', key: 'contact'},
        {title: '价格', dataIndex: 'total', key: 'total'},
        {
            title: '状态', dataIndex: 'status', key: 'status',
            render: tags => {
                if (tags == 0) {
                    var color = 'gray';
                    var statu = "删除"
                }
                if (tags == 1) {
                    var color = 'red';
                    var statu = "待处理"
                }
                if (tags == 3) {
                    var color = 'red';
                    var statu = "处理完毕"
                }

                return <span><Tag color={color} key={tags}>{statu}</Tag></span>
            }
        },
        {title: '申请时间', dataIndex: 'createtime', key: 'createtime'},

        {
            title: '操作', key: 'key_oprator',
            render: (text, record, index) => {
                let deleteLink = <Popconfirm placement="leftTop" onConfirm={this.handleDelete.bind(this, record.id)}
                                             okText="是" cancelText="否"
                                             title={'是否确认删除'}>
                    <a href="#">删除</a>
                </Popconfirm>
                deleteLink =
                    <RightBox resource={RightConstants.BOOKING.BOOKING_DELETE} split={true}>{deleteLink}</RightBox>
                let editLink = <a href="#" onClick={this.handleOpen.bind(this, record.id, false)}>编辑</a>
                editLink = <RightBox resource={RightConstants.BOOKING.BOOKING_EDIT} split={true}>{editLink}</RightBox>
                let viewLink = <a href="#" onClick={this.handleOpen.bind(this, record.id, true)}>查看</a>
                editLink = record.status === '1' ? editLink : null;
                deleteLink = record.status === '1' ? deleteLink : null;
                return <span>{editLink}{deleteLink}{viewLink}</span>;
            }
        }
    ];

    render() {
        // console.log(R.isNil(this.props.quickBooking.dataSource.list))
        let dataSource = R.isNil(this.props.quickBooking.dataSource) ? {} : this.props.quickBooking.dataSource;
        let formItemLayout = {labelCol: {span: 3}, wrapperCol: {span: 16}};
        const {getFieldDecorator} = this.props.form;
        let values = this.props.form.getFieldsValue();
        // values.beginTime = R.isNil(values.bookingTime) || R.isEmpty(values.bookingTime) ? null : values.bookingTime[0].format(Constants.DATEFORMAT);
        // values.endTime = R.isNil(values.bookingTime) || R.isEmpty(values.bookingTime) ? null : values.bookingTime[1].format(Constants.DATEFORMAT);
        // values.bookingTime = undefined;
        let pagination = {
            showTotal: total => `共 ${total} 条数据`,
            current: this.props.quickBooking.page.page,
            pageSize: this.props.quickBooking.page.size,
            total: this.props.quickBooking.page.totalRow,
            showSizeChanger: true,
            onShowSizeChange: (current, size) => {
                let newPage = R.pick(['page', 'size'], this.props.quickBooking.page);
                newPage.size = size;
                newPage.page = 1;
                this.props.dispatch({
                    type: 'quickBooking/getOpenListForPage',
                    payload: {
                        ...values,
                        ...newPage
                    }
                });
            },
            onChange: (pageNumber, pageSize) => {
                let newPage = R.pick(['page', 'size'], this.props.quickBooking.page);
                newPage.page = pageNumber;
                this.props.dispatch({
                    type: 'quickBooking/getOpenListForPage',
                    payload: {
                        ...values,
                        ...newPage
                    }
                });
            }
        }

        return (
            <div>

                <Row>
                    <Col span={8}><FormItem {...formItemLayout} label='联系人'>{getFieldDecorator('contact')(
                        <Input/>)}</FormItem></Col>
                    <Col span={8}><FormItem {...formItemLayout} label='装货港口'>{getFieldDecorator('port')(
                        <Input/>)}</FormItem></Col>
                </Row>

                <Row>
                    <Col span={16} type="flex" justify="left">
                        <FormItem  {...formItemLayout} label={'状态'}>
                            {getFieldDecorator('status', {
                                initialValue: ""
                            })(
                                <RadioGroup style={{width: 800}}>
                                    <Radio value="1">待处理</Radio>
                                    <Radio value="2">已处理</Radio>
                                    <Radio value="0">删除</Radio>
                                </RadioGroup>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={8}>
                        <Button type="primary" icon="search" onClick={()=>{this.handleSearch(true)}}>查询</Button>
                    </Col>
                </Row>

                <Table loading={this.props.loading} rowKey={record => record.id}
                       dataSource={this.props.trailer.list} columns={this.columns} bordered={true}
                       size={'middle'}
                       pagination={pagination}/>
                <TrailerDetail wrappedComponentRef={(inst) => this.onlineBookingDetail = inst}
                                     refreshList={this.handleSearch}/>
            </div>
        )
    }
})


export default connect((state) => ({
    loading: state.loading.models.quickBooking,
    quickBooking: state.quickBooking,
    onlineBooking: state.onlineBooking,
    trailer: state.trailer,
}))(onlineBooking);